<template>
    <my-dialog title="imp work master" :submit="submitFn" :mode="props.mode=='edit' ? 'edit':'create'">
        <div class="q-gutter-md q-pa-md">
            <q-input v-model="state.data.stock_code" type="text" label="Stock Code" borderless class="input-css" readonly />
            <q-input v-model="state.data.doc_name" type="text" label="Doc Name" borderless class="input-css" />
            <q-input v-model="state.data.description" type="textarea" label="Description" borderless class="input-css" />
            <q-input v-model="state.data.version" type="text" label="Version" borderless class="input-css" />
            <div class="overflow-x-hidden" v-if="state.data.file">
                <q-icon name="attach_file" />
                <a  target="_blank" :href="state.data.file">{{ filenameFromUrl(state.data.file) }}</a>
            </div>
            <q-file v-model="file" label="Upload Improvement Work" borderless class="input-css" counter :counter-label="counterLabelFn" max-files="1">
                <template v-slot:prepend>
                    <q-icon name="attach_file" />
                </template>
            </q-file>
        </div>
    </my-dialog>
   
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { StockItemImpWork } from 'src/services/type'
import { getStockItemImpWork, patchStockItemImpWork } from 'src/services/stockItemImpWorkService'
import { createStockItemImpWorks } from 'src/services/stockItemImpWorkService'
import { useQuasar } from 'quasar'
import MyDialog from '../container/MyDialog.vue'

export interface StockItemImpWorkForm {
    stock_code?: string
    id?: number
    mode: 'create' | 'edit'
    closeable: boolean
}

const emit = defineEmits(['submit', 'close'])

const $q = useQuasar()

const props = withDefaults(defineProps<StockItemImpWorkForm>(), {
    mode: 'create',
    stock_code: '',
    closeable: true
})

const state = reactive<{
    data: StockItemImpWork
}>({
    data: {
        stock_code: props.stock_code,
        doc_name: '',
        description: '',
        version: '',
        invalid: 0,
        complete: 0,
        stock_item: 0,
        id: 0,
        file:''
    }
})

const file = ref<File | null>(null)

function counterLabelFn({ totalSize, filesNumber, maxFiles }: { totalSize: string; filesNumber: number; maxFiles: number}) {
    return `${filesNumber} files of ${maxFiles} | ${totalSize}`
}

async function initData() {
    if (props.id && props.mode == 'edit') {
        state.data = await getStockItemImpWork(props.id)

    }
}

async function create() {
    if (props.stock_code) {

        const createRes = await createStockItemImpWorks(
            props.stock_code, 
            state.data.doc_name, 
            state.data.description,
            state.data.version,
            file.value)

        if (createRes) {
            $q.notify({
                color: 'positive',
                message: 'Created',
                icon: 'check',
                
            })
            emit('submit')
            emit('close')
        }
    }
}

async function edit() {
    if (props.id) {
        const res = await patchStockItemImpWork(props.id, {...state.data},file.value)
        if (res) {
            emit('submit')
            emit('close')
        }
    }
    return
}

function submitFn() {
    if (props.mode == 'create') {
        create()
    } else {
        edit()
    }
}

function closeFn() {
    emit('close')
}

function filenameFromUrl(url:string){
    const arr = url.split('/')
    return arr[arr.length-1]
}

onMounted(() => {
    initData()
})

</script>

<style scoped>
.cap {
    text-transform: capitalize;

}
</style>